<template>
  <div class="app">
    <input
      type="number"
      v-model.number="counter"
      step="100"
    />
    <h2>{{ showNumber }}</h2>
    <h2>{{ animtedNumber }}</h2>
    <h2>{{ showNumber.toFixed(0) }}</h2>
  </div>
</template>
<script>
import gsap from 'gsap'
export default {
  data() {
    return {
      counter: 0,
      showNumber: 0
    }
  },
  computed: {
    animtedNumber() {
      return this.showNumber.toFixed(0)
    }
  },
  watch: {
    counter(newVal) {
      gsap.to(this, {
        duration: 1,
        showNumber: newVal
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
